@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Gugi&family=Orbit&display=swap');
/* -----------------------------------------------
	* Basic 메인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 
	- 최초 작성자 : 
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

:root {
	--sn-retro-color-1: #222831;
	--sn-retro-color-2: #31363F;
	--sn-retro-color-3: #76ABAE;
	--sn-retro-color-4: #EEEEEE;
}

.chakra-petch-regular {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.orbit-regular {
  font-family: "Orbit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.main-container {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100vw;
	height: 100dvh;
	z-index: 0;
}
.main-container * {
	box-sizing: border-box;
}

.window-container{
	position: absolute;
	background: transparent;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100vw;
	height: 100dvh;
	transform: translateX(0px);
	border: none;
	border-radius: 0px;
	z-index: 0;
}

.main-window-container{
	background: var(--sn-retro-color-1);
	color: var(--sn-retro-color-4);
	width: fit-content;
	position: absolute;
	border: 3px solid var(--sn-retro-color-4);
}

.window-cap {
	display: none;
}
.window-inner {overflow: hidden;}

.main-window-cap {
	position: relative;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	display: flex;
	justify-content: space-between; 
	align-items: center;
	background: linear-gradient(var(--sn-retro-color-4) 70%, #5f5f5f 0);
	background-size: 100% 6px;
	border: 4px solid var(--sn-retro-color-4);
	border-left: 2px solid var(--sn-retro-color-4);
	border-right: 2px solid var(--sn-retro-color-4);
}
.window-cap-title{
	background: var(--sn-retro-color-4);
	height: 100%;
	align-content: center;
}
.window-cap-title span {
	font-family: "Gugi", sans-serif;
	font-size: 20px;
	color: black;
	padding: 0 36px;
  text-transform: capitalize;
}
/* .main-window-button-container{
	position: absolute;
	left: 16px;
	top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
} */
.main-window-button{
	width: 22px;
	height: 22px;
	background: transparent;
	box-shadow: inset 2px 2px 0px 1px #00000077, inset 0 0px 3px 0px #00000077;
	background: var(--sn-retro-color-4);
	border: 2px solid var(--sn-retro-color-4);
}
.main-guide{
	width: 680px;
	/* height: 720px; */
	left: 161px;
	top: 81px;
	overflow: hidden;
	background: black;
}


.main-window-inner {
	padding: 30px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: "Orbit", sans-serif;
  font-weight: 400;
  font-style: normal;
	text-align: center;
	background-color: var(--sn-retro-color-1);
	width: 100%;
	border: 2px solid #eee;
	margin-top: 5px;
	margin-right: 5px;
}
.main-inner-content{
	font-size: 16px;
	margin: 20px 0;
	line-height: normal;
}
.main-inner-content span {
	display: inline-block;
	position: relative;
	transform: skewX(-10deg);
	background: var(--sn-retro-color-3);
}
.main-inner-content.content-ai div{
	text-decoration: underline;
	font-size: 16px;
}

.main-inner-container > div {display: flex;}
.main-inner-side {flex-shrink: 0; padding-top: 5px;	gap: 3px;}
.main-inner-wrapper {background: black; padding: 4px;}
.main-inner-wrapper img {width: 136px;}
.main-inner-side {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.main-inner-side .main-inner-wrapper:last-child {border: 2px solid var(--sn-retro-color-4);	margin: 5px; margin-bottom: 0;}
.main-inner-side .main-inner-wrapper:last-child img{ width: 130px;}
.main-inner-warning {padding: 4px 0; animation: aniScroll 7s linear infinite;}
/* .main-inner-warning img {height: 120px; width: auto;} */
@keyframes aniScroll{
  0%{ transform: translateX(0%) }
  100%{ transform: translateX(-100%) }
}

.bn-title{font-size: 24px; margin-top: 40px;}
.main-banners{
	line-height: normal;
	margin-top: 20px;
}
.main-banners a{position: relative;}
.main-banners img {
	margin-bottom: 5px;
}
.main-banners div {display: inline-block;}
.main-banners a::after{
	content: attr(data-text);
	display: block;
	position: absolute;
	font-weight: bold;
	font-size: 12px;
	white-space: nowrap;
	color: var(--sn-retro-color-1);
	z-index: 1;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 15px 6px;
	background: var(--sn-retro-color-4);
	box-shadow: 0 0 10px 0px #00000050;
	border-radius: 5px;
	transition: 0.2s cubic-bezier(0.49, 1.11, 0.77, 1.27);
	visibility: hidden;
}
.main-banners>a:hover::after{
	transform: translateX(-50%) translateY(-120%);
	visibility: visible;
}
.bn-copy{position: relative;}
.bn-copy button {border: none;}
.bn-copy button::after{
	content: attr(data-text);
	display: block;
	position: absolute;
	font-weight: bold;
	font-size: 12px;
	white-space: nowrap;
	color: var(--sn-retro-color-1);
	z-index: 1;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 15px;
	background: var(--sn-retro-color-4);
	box-shadow: 0 0 10px 0px #00000050;
	border-radius: 5px;
	transition: 0.2s cubic-bezier(0.49, 1.11, 0.77, 1.27);
	visibility: hidden;
}
.bn-copy>button:hover::after{
	transform: translateX(-50%) translateY(-120%);
	visibility: visible;
}
.bn-copy>button:focus:after{
	content: 'copy!';
	transform: translateX(-50%) translateY(-120%);
	visibility: visible;
}

.main-inner-content.inner-bn{
	font-size: 12px;
}
.main-inner-content.inner-bn .bn-copy{
	margin-bottom: 5px;
}


.main-intro {
	top: 55px;
	left: 200px;
	border: none;
	
}
.main-title {
	box-sizing: border-box;
	right: 158px;
	left: auto;
	top: 162px;
	height: auto;
	width: 1000px;
	font-family: "Gugi", sans-serif;
	overflow: hidden;
}
.main-banner-container {
	display: flex; 
	justify-content: center;
	align-items: center;
	min-height: 200px;
}
.main-banner {
	position: relative;
	line-height: normal;
	width: 100%;
	height: 200px;
  background-color: var(--sn-retro-color-1);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	letter-spacing: -6.5px;
}
.main-banner::before{
	content: attr(data-text);
	position: absolute;
	font-weight: 400;
	font-size: 12em;
	white-space: nowrap;
	color: var(--sn-retro-color-3);
	z-index: 1;
}
.main-banner::after {
	content: attr(data-text);
	position: absolute;
	font-weight: 400;
	font-size: 12em;
	white-space: nowrap;
	color: var(--sn-retro-color-4);
  inset: 0;
	z-index: 2;
	clip-path: circle(0px at var(--x) var(--y));
	transition:  clip-path 0.1;
	background: url('http://station.dothome.co.kr/profile_3.png');
  background-size: cover;
	background-position: center center;
  display: flex;
  justify-content: center;
	align-items: center;
}
.main-banner:hover::after {
  clip-path: circle(150px at var(--x) var(--y));
}

.main-frame-1{
	right: 286px;
	bottom: 100px;
}
.main-frame-1 img {
	width: 500px;
}

.main-frame-2 {
	bottom: 50px;
	right: 680px;
	overflow: hidden;
}
.main-frame-2 {
	bottom: 50px;
	right: 680px;
	overflow: hidden;
}

.main-frame-3{
	right: 580px;
	top: 60px;
}
.main-frame-3 img {
	height: 220px;
}
.main-frame-4{
	right: 130px;
	top: 100px;
}



.progress-container {font-family: "Orbit", sans-serif; position: relative; background:transparent; width: 360px; height: 170px; padding: 2px;}
.progress-bar{width: 100%; height: 30px; background-color: transparent; margin-bottom: 4px; border: 3px solid #76ABAE; padding: 2px;}
.progress-bar:last-child {margin-bottom: 0;}
.progress-bar div{ width: auto; height: 100%; background: #76ABAE;}
.number-year {color:#b6b6b6;}
.progress-bar .inner-month {background-color: #83AAF7;}
.progress-month {border: 3px solid #83AAF7;}
.number-month {color:#83AAF7;}
.progress-bar .inner-date {background-color: #BA9EF2;}
.progress-date {border: 3px solid #BA9EF2}
.number-date {color:#BA9EF2;}
.progress-bar .inner-hour {background-color: #9CD06B;}
.progress-hour {border: 3px solid #9CD06B}
.number-hour {color:#9CD06B;}
.progress-bar .inner-minute {background-color: #DFB06A;}
.progress-minute {border: 3px solid #DFB06A}
.number-minute {color:#DFB06A;}
.progress-bar .inner-second {background-color: #F182AC;}
.progress-second {border: 3px solid #F182AC}
.number-second {color:#F182AC;}
.progress-number-container {align-content: center; text-align: center; position: absolute;top: 0px; left: 0px;  width: 100%; height: 170px; background: #0000009c; backdrop-filter: blur(5px); opacity: 0;}
.progress-container:hover .progress-number-container{opacity: 100;}
.number-calendar{font-size: 20px; margin-top: -4px;	margin-bottom: 10px;}
.number-time{font-size: 36px;}

@media all and (max-width:1600px)  {
  .main-title {
    transform: scale(0.5);
    transform-origin: left;
    left: 100px;
  }
  .main-profile{
    transform: scale(0.5);
    transform-origin: left;
    left: 120px;
  }
  .main-intro {
    display: none !important;
  }
}

@media all and (max-width:1025px) {
	.main-title {display: none !important;}
	.main-profile {display: none !important;}
	.main-intro {display: none !important;}
	.main-guide {top: 70px;left: 50%; transform: translateX(-50%);}
	h1#logo{padding: 0;}
}